<!--
 * @author guojiteng
 -->
<template>
  <div id="logManage">
    <el-collapse-transition />
    <el-collapse-transition>
      <div v-show="!searchshow" class="course-search separate">
        <div class="course-search-inner">
          <el-row>
            <el-col :span="8">
              <div class="search-inner-item">
                <div class="item-label">用户名</div>
                <el-input
                  v-model.trim="searchQuery.crtUser"
                  style="width: 300px;"
                  class="filter-item"
                  placeholder="请输入用户名搜索"
                />
              </div>
            </el-col>
            <el-col :span="8">
              <div class="search-inner-item">
                <div class="item-label">操作时间</div>
                <el-date-picker
                  v-model.trim="searchQuery.queryStartTime"
                  style="width:45%;"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  type="datetime"
                  placeholder="开始时间"
                />至
                <el-date-picker
                  v-model.trim="searchQuery.queryEndTime"
                  style="width:45%;"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  type="datetime"
                  placeholder="结束时间"
                />
              </div>
            </el-col>
            <el-col :span="8">
              <div class="search-inner-item">
                <div class="item-label">终端</div>
                <el-input
                  v-model.trim="searchQuery.terminal"
                  style="width: 300px;"
                  class="filter-item"
                  placeholder="请输入终端搜索"
                />
              </div>
            </el-col>
            <el-col :span="8">
              <div class="search-inner-item">
                <div class="item-label">访问接口</div>
                <el-input
                  v-model.trim="searchQuery.url"
                  style="width: 300px;"
                  class="filter-item"
                  placeholder="请输入访问接口搜索"
                />
              </div>
            </el-col>
            <el-col :span="8">
              <div class="search-inner-item">
                <div class="item-label">设备名称</div>
                <el-input
                  v-model.trim="searchQuery.deviceName"
                  style="width: 300px;"
                  class="filter-item"
                  placeholder="请输入设备名称搜索"
                />
              </div>
            </el-col>
            <el-col :span="8">
              <div class="search-inner-item">
                <div class="item-label">操作结果</div>
                <el-checkbox-group v-model="choose" style="margin-top:15px;">
                  <el-checkbox label="200">{{ '成功' }}</el-checkbox>
                  <el-checkbox label="500">{{ '失败' }}</el-checkbox>
                </el-checkbox-group>
              </div>
            </el-col>
          </el-row>
        </div>
        <div class="course-search-btn">
          <el-button type="primary" @click="handleFilter">搜索</el-button>
          <el-button class="filter-item" type="primary" @click="resettingBtn">重置</el-button>
        </div>
      </div>
    </el-collapse-transition>
    <div class="btn-container">
      <div class="btn-container-title">
        <span>操作日志</span>
      </div>
      <div class="btn-container-btns">
        <el-button
          v-permission="'logManageExport'"
          v-loading.fullscreen.lock="fullscreenLoading"
          class="filter-item"
          style="margin-left: 10px;"
          @click="exportFun"
        >导出</el-button>
      </div>
    </div>
    <div class="table">
      <el-table
        ref="rolemantable"
        v-loading="listLoading"
        :data="list"
        class="tableScope"
        style="width: 100%"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column prop="crtUser" label="用户名" width="100" show-overflow-tooltip />
        <el-table-column prop="systemName" label="系统名称" show-overflow-tooltip width="150" />
        <el-table-column prop="optContent" label="操作内容" show-overflow-tooltip width="150" />
        <el-table-column prop="startTime" label="操作时间" show-overflow-tooltip min-width="160" />
        <el-table-column prop="url" label="访问接口" width="300" show-overflow-tooltip />
        <el-table-column
          prop="costTime"
          label="耗时(毫秒)"
          align="center"
          show-overflow-tooltip
          min-width="90"
        />
        <el-table-column
          prop="result"
          label="操作结果"
          align="center"
          :formatter="getResult"
          show-overflow-tooltip
          min-width="80"
        />
        <el-table-column prop="crtIp" label="ip地址" show-overflow-tooltip width="200" />
        <el-table-column prop="deviceName" label="设备名称" show-overflow-tooltip width="100" />
        <el-table-column prop="terminal" label="终端" show-overflow-tooltip width="100" />
      </el-table>
    </div>
    <div class="btn-pagion fix">
      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="pageQuery.page"
        :limit.sync="pageQuery.pageSize"
        @pagination="getList"
      />
    </div>
  </div>
</template>

<script>
import { queryPage, exportData } from '@/views/logmanage/api/index'
import Pagination from '@/components/Pagination'
import permission from '@/directive/permission/index.js' // 权限判断指令
import { exportSign } from '@/utils/fileImportOrExportSign'
export default {
  name: 'LogManage',
  components: { Pagination },
  directives: { permission },
  data() {
    return {
      fullscreenLoading: false,
      pageQuery: {
        page: 1,
        pageSize: 10
      },
      searchshow: false,
      searchQuery: {
        queryStartTime: '',
        queryEndTime: '',
        crtUser: '',
        optContent: '',
        terminal: '',
        url: '',
        deviceName: '',
        result: []
      },
      choose: [],
      list: [],
      total: 0,
      listLoading: false
    }
  },
  computed: {

  },
  created() {
    this.getList()
  },
  methods: {
    getResult(row) {
      return row.result === '200' ? '成功' : '失败'
    },
    exportFun() {
      localStorage.setItem('current', JSON.stringify(this.searchQuery))
      this.fullscreenLoading = true
      const obj = exportSign(this.searchQuery).obj
      exportData(obj).then(res => {
        const content = res.data
        const blob = new Blob([content])
        const fileName = '导出信息.xls'
        if ('download' in document.createElement('a')) {
          // 非IE下载
          const elink = document.createElement('a')
          elink.download = fileName
          elink.style.display = 'none'
          elink.href = URL.createObjectURL(blob)
          document.body.appendChild(elink)
          elink.click()
          URL.revokeObjectURL(elink.href) // 释放URL 对象
          document.body.removeChild(elink)
        } else {
          // IE10+下载
          navigator.msSaveBlob(blob, fileName)
        }
        this.fullscreenLoading = false
        // eslint-disable-next-line handle-callback-err
      }).catch(err => {
        this.fullscreenLoading = false
      })
    },

    getList() {
      if (this.choose.length === 2) {
        this.searchQuery.result = ''
      } else {
        this.searchQuery.result = this.choose.join(',')
      }

      Object.assign(this.searchQuery, this.pageQuery)
      this.listLoading = true
      return new Promise((resolve, reject) => {
        queryPage(this.searchQuery).then(res => {
          this.listLoading = false
          this.list = res.data.data.rows
          this.total = res.data.data.total
        }).catch(error => {
          reject(error)
          this.listLoading = false
        })
      })
    },

    handleFilter() {
      this.pageQuery.page = 1
      this.getList()
    },

    resettingBtn() {
      this.pageQuery.page = 1
      this.pageQuery.pageSize = 10
      for (const key in this.searchQuery) {
        this.searchQuery[key] = ''
      }
      this.choose = []
      this.getList()
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" type="text/scss">
$dark_gray: #bfced6;
$mainColor: #18a5fd;
.custom-tree-node {
  .companyName {
    width: 306px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
}
#logManage {
  padding: 10px;
  .el-input__prefix {
    display: none;
  }
  .el-date-editor .el-range-separator {
    padding: 0;
  }
  .course-search {
    background-color: #fff;
    padding: 0 10px;
    .svg-container {
      padding: 0 5px 0 10px;
      color: $dark_gray;
      vertical-align: middle;
      display: inline-block;
      &_login {
        font-size: 20px;
      }
    }
    .search-input {
      width: 60%;
      position: relative;
      &:after {
        content: "";
        position: absolute;
        left: -25px;
        right: 0;
        bottom: 8px;
        height: 1px;
        background: rgba(226, 227, 232, 1);
      }
      input {
        outline: none;
        background: transparent;
        border: none;
        outline: medium;
        padding: 0;
        &:focus {
          outline: none;
          background-color: transparent;
        }
      }
    }
    .course-search-btn {
      display: inline-block;
      float: right;
      .el-button.is-round {
        padding: 10px 30px;
        margin-right: 34px;
      }
      .course-search-more {
        font-size: 14px;
        font-weight: 500;
        color: $mainColor;
        cursor: pointer;
        margin-left: 10px;
      }
    }
    &.merge {
      height: 50px;
      line-height: 50px;
    }
    &.separate {
      .course-search-inner {
        padding-top: 10px;
        .search-inner-item {
          .item-label {
            height: 30px;
            line-height: 30px;
            font-size: 14px;
            color: #a6a6a6;
            font-weight: 400;
          }
          .el-input {
            position: relative;
            .el-input__inner {
              border: none;
              padding: 0;
            }
            &:after {
              content: "";
              height: 1px;
              background-color: #e2e3e8;
              position: absolute;
              left: 0;
              right: 0;
              bottom: 0;
            }
          }
        }
      }
      .course-search-btn {
        text-align: center;
        display: block;
        float: none;
        height: 56px;
        line-height: 56px;
      }
    }
  }
  .btn-container {
    display: flex;
    align-items: center;
    margin-top: 5px;
    margin-bottom: 5px;
    .btn-container-title {
      flex: 1;
      height: 36px;
      line-height: 36px;
      font-size: 16px;
      font-weight: bold;
      color: rgba(51, 51, 51, 1);
    }
  }
  .custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
  }
  .el-checkbox__label {
    font-weight: 400;
  }
  /*.roletree{*/
  /*  .el-form-item__label{*/
  /*    position: relative;*/
  /*    &:before{*/
  /*      content: '*';*/
  /*      color: red;*/
  /*      position: absolute;*/
  /*      left: 1px;*/
  /*      top: 3px;*/
  /*    }*/
  /*  }*/
  /*}*/
  .el-form-item__label {
    width: 90px !important;
  }
  .el-form-item__content {
    margin-left: 90px !important;
  }
}
</style>
